<html aria-label="Sciter Frame" aria-description="Main Sciter Frame">
  <head>
    <title>Sciter</title>
    <style>
      
      @const BUTTON_FORE_NORMAL: none;
      @const BUTTON_FORE_HOVER: url(res:toolbar-button-hover.png);
	    @const BUTTON_FORE_ACTIVE: url(res:toolbar-button-pressed.png);
	    @const BUTTON_FORE_CHECKED: url(res:toolbar-button-checked.png);
	    @const BUTTON_FORE_CHECKED_HOVER: url(res:toolbar-button-checked-hover.png);
	    @const BUTTON_FORE_DISABLED: none;

      @image-map icons {
        src: url(res:icons-h.png) 192dpi,
             url(res:icons-n.png) ;
        cells:3 2; /* 3 columns, 2 rows */
        /* logical names of the parts, see toolbar-icons.png */ 
        items:  open,
                refresh,
                inspector,
                help,
                glass,
                open-in-view;   
      }
            
      html { background-color:#5C4C4C; overflow:hidden; } 
      
      body { flow:horizontal; margin:0; }
      
      div#toolbar  
      {
        flow:vertical; 
        width:max-content; 
        padding:3dip; 
        height:*;
      }
      div#toolbar > button                   
      {
        appearance:none;
        foreground-position: 4 4 4 4; 
        foreground-repeat : expand stretch-left stretch-right stretch-middle;
        foreground-image: @BUTTON_FORE_NORMAL; 
        display:block; 
        background-repeat:no-repeat; 
        background-position:50% 50%; 
        background-size:38dip 38dip;
        padding:0;
        size:46dip; 
      }
	    div#toolbar > button:hover          {  foreground-image: @BUTTON_FORE_HOVER; transition:none; }
	    div#toolbar > button:active         {  foreground-image: @BUTTON_FORE_ACTIVE; foreground-position:53% 53%; }
	    div#toolbar > button:checked	      {  foreground-image: @BUTTON_FORE_CHECKED;  }
	    div#toolbar > button:checked:hover  {  foreground-image: @BUTTON_FORE_CHECKED_HOVER; }
	    div#toolbar > button:disabled       {  foreground-image: @BUTTON_FORE_DISABLED; opacity:0.5; }
	    frame#content{ size:*; 
	                   background :url(res:no-color.png) repeat; }
      frame#content > div#intro
      { 
        font: system;
        background-color:window; padding:3px; 
        size:*;
      }
      frame#content > div#intro > img#arrow { vertical-align:middle; size:0.8em; color:brown; }
      
      frame#content[allow-drop]
      {
          outline:2px orange solid -2px;
      }

      div#toolbar > button#open         { background-image:image-map(icons,open); }
      div#toolbar > button#reload       { background-image:image-map(icons,refresh); }
      div#toolbar > button#help         { background-image:image-map(icons,help); }
      div#toolbar > button#inspector    { background-image:image-map(icons,inspector); }
      div#toolbar > button#open-in-view { background-image:image-map(icons,open-in-view); }
      div#toolbar > button#glass        { background-image:image-map(icons,glass); margin-top:*; }
      
            
      /*div#intro { behavior:htmlarea; }*/
      
      @media on-glass {
        html { background-color:transparent; }
        html > body > frame#content { background-image:none; }
      }
      
      hr { margin:0; padding:0; height:0; border:none; border-top: 1px dashed #999; }
      
    </style>

    <script type="module" src="res:default.js" />

  </head>
  <body aria-label="Sciter Frame Body">
    <div #toolbar role="toolbar">
      <button #open title="load html" aria-label="Load Document" />
      <button #open-in-view title="load html in view" aria-label="Load Document in View" />
      <button #reload title="reload html" disabled aria-label="Reload Document" />
      <button #help title="Help browser" aria-label="Help" />
      <hr>
      <button #inspector title="DOM inspector" aria-label="DOM inspector" />
      <button|checkbox #glass title="Glass mode" aria-label="Set Glass Mode"/> 

    </div>
    <frame #content src="res:sys-info.htm" aria-label="Content" ></frame>
  </body>
</html>